<template>
  <!-- 右侧菜单 -->
  <el-container
    v-loading="loading"
    class="ik-container"
  >
    <!-- 顶部标题信息 -->
    <el-header height="42px">
      <span class="ik-board-title">
        <span class="logo" />
        物料总貌
        <div class="time">
          <span>{{ time.value }}</span>
        </div>
      </span>
    </el-header>

    <!-- 数据区 -->
    <el-main>
      <!-- 表格区 -->
      <el-row
        :gutter="20"
        class="board-row"
      >
        <el-col
          :span="24"
          class="board-col"
          style="height: 450px"
        >
          <ik-table-base
            code="1"
            title="供应商详情"
            :data="[
              { code: 'M_0001', name: '物料1', currentAmount: 70, totalAmount: 30, totalQuantity: 30,
                planQuantity: 30, ordQuantity: 30, arriveQuantity: 30, timelinessQuantity: 30, timelinessRate: 30,
                exeQuantity: 30, defectiveQuantity: 30, defectiveRate: 30, returnQuantity: 30, returnRate: 30 },
              { code: 'M_0002', name: '物料2', currentAmount: 70, totalAmount: 30, totalQuantity: 30,
                planQuantity: 30, ordQuantity: 30, arriveQuantity: 30, timelinessQuantity: 30, timelinessRate: 30,
                exeQuantity: 30, defectiveQuantity: 30, defectiveRate: 30, returnQuantity: 30, returnRate: 30 },
              { code: 'M_0003', name: '物料3', currentAmount: 70, totalAmount: 30, totalQuantity: 30,
                planQuantity: 30, ordQuantity: 30, arriveQuantity: 30, timelinessQuantity: 30, timelinessRate: 30,
                exeQuantity: 30, defectiveQuantity: 30, defectiveRate: 30, returnQuantity: 30, returnRate: 30 },
              { code: 'M_0004', name: '物料4', currentAmount: 70, totalAmount: 30, totalQuantity: 30,
                planQuantity: 30, ordQuantity: 30, arriveQuantity: 30, timelinessQuantity: 30, timelinessRate: 30,
                exeQuantity: 30, defectiveQuantity: 30, defectiveRate: 30, returnQuantity: 30, returnRate: 30 },
              { code: 'M_0005', name: '物料5', currentAmount: 70, totalAmount: 30, totalQuantity: 30,
                planQuantity: 30, ordQuantity: 30, arriveQuantity: 30, timelinessQuantity: 30, timelinessRate: 30,
                exeQuantity: 30, defectiveQuantity: 30, defectiveRate: 30, returnQuantity: 30, returnRate: 30 },
              { code: 'M_0006', name: '物料6', currentAmount: 70, totalAmount: 30, totalQuantity: 30,
                planQuantity: 30, ordQuantity: 30, arriveQuantity: 30, timelinessQuantity: 30, timelinessRate: 30,
                exeQuantity: 30, defectiveQuantity: 30, defectiveRate: 30, returnQuantity: 30, returnRate: 30 },
              { code: 'M_0007', name: '物料7', currentAmount: 70, totalAmount: 30, totalQuantity: 30,
                planQuantity: 30, ordQuantity: 30, arriveQuantity: 30, timelinessQuantity: 30, timelinessRate: 30,
                exeQuantity: 30, defectiveQuantity: 30, defectiveRate: 30, returnQuantity: 30, returnRate: 30 },
              { code: 'M_0008', name: '物料8', currentAmount: 70, totalAmount: 30, totalQuantity: 30,
                planQuantity: 30, ordQuantity: 30, arriveQuantity: 30, timelinessQuantity: 30, timelinessRate: 30,
                exeQuantity: 30, defectiveQuantity: 30, defectiveRate: 30, returnQuantity: 30, returnRate: 30 },
              { code: 'M_0009', name: '物料9', currentAmount: 70, totalAmount: 30, totalQuantity: 30,
                planQuantity: 30, ordQuantity: 30, arriveQuantity: 30, timelinessQuantity: 30, timelinessRate: 30,
                exeQuantity: 30, defectiveQuantity: 30, defectiveRate: 30, returnQuantity: 30, returnRate: 30 },
              { code: 'M_00010', name: '物料10', currentAmount: 70, totalAmount: 30, totalQuantity: 30,
                planQuantity: 30, ordQuantity: 30, arriveQuantity: 30, timelinessQuantity: 30, timelinessRate: 30,
                exeQuantity: 30, defectiveQuantity: 30, defectiveRate: 30, returnQuantity: 30, returnRate: 30 }
            ]"
            :columns="[
              { prop: 'code', label: '物料编码', width: 150 },
              { prop: 'name', label: '物料名称', width: 150 },
              { prop: 'totalAmount', label: '累积税价合计', width: 120 },
              { prop: 'totalQuantity', label: '累积数量合计', width: 120 },

              { prop: 'planQuantity', label: '计划数', width: 120 },
              { prop: 'ordQuantity', label: '订单数', width: 120 },
              { prop: 'arriveQuantity', label: '到货数', width: 120 },
              { prop: 'timelinessQuantity', label: '如期数', width: 120 },
              { prop: 'timelinessRate', label: '如期率', width: 120 },
              { prop: 'exeQuantity', label: '收货数', width: 120 },
              { prop: 'defectiveQuantity', label: '异常数', width: 120 },
              { prop: 'defectiveRate', label: '异常率', width: 120 },
              { prop: 'returnQuantity', label: '退货数', width: 120 },
              { prop: 'returnRate', label: '退货率', width: 120 }
            ]"
          />
        </el-col>
      </el-row>

      <!-- 图表区 -->
      <el-row
        :gutter="20"
        class="board-row"
      >
        <!-- 物料采购比例 -->
        <el-col
          :span="6"
          class="board-col"
          style="  height: 350px"
        >
          <ik-pie-base-chart
            code="1-1"
            title="采购物料分布"
            :data="[
              {'key':'A类', 'value': '72'},
              {'key':'B类', 'value': '27'},
              {'key':'C类', 'value': '4'}
            ]"
            data-dimension-field="value"
            analysis-dimension-field="key"
          />
        </el-col>
        <!-- 物料异常构成 -->
        <el-col
          :span="18"
          class="board-col"
          style="  height: 350px"
        >
          <ik-bar-stack-chart
            code="1-2"
            title="物料异常构成"
            :data="[
              {'defective':'异常1', 'materiel':'物料1', 'value': '84.63'},
              {'defective':'异常1', 'materiel':'物料2', 'value': '14.52'},
              {'defective':'异常1', 'materiel':'物料3', 'value': '4.64'},
              {'defective':'异常2', 'materiel':'物料4', 'value': '197.72'},
              {'defective':'异常2', 'materiel':'物料5', 'value': '27.34'},
              {'defective':'异常2', 'materiel':'物料6', 'value': '8.67'},
              {'defective':'异常3', 'materiel':'物料3', 'value': '251.24'},
              {'defective':'异常3', 'materiel':'物料4', 'value': '20.16'},
              {'defective':'异常3', 'materiel':'物料5', 'value': '9.98'},
              {'defective':'异常4', 'materiel':'物料3', 'value': '63.24'},
              {'defective':'异常4', 'materiel':'物料4', 'value': '17.16'},
              {'defective':'异常4', 'materiel':'物料5', 'value': '95.98'},
            ]"
            data-dimension-field="value"
            first-analysis-dimension-field="defective"
            second-analysis-dimension-field="materiel"
          />
        </el-col>
      </el-row>
    </el-main>

    <!-- 底部页脚信息 -->
    <el-footer height="36px">
      <el-row :gutter="0">
        <el-col :span="12">
          <span class="ik-footer-info" style="float: left">底部标签</span>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>

// bar
import IkPieBaseChart from "@/components/ik/board/chart/pie/base/IkPieBaseChart"
import IkBarStackChart from "@/components/ik/board/chart/bar/stack/IkBarStackChart"
// table
import IkTableBase from "@/components/ik/board/table/IkTableBase"

export default {
  components: {
    IkTableBase,
    IkBarStackChart,
    IkPieBaseChart
  },
  props: {
  },
  data() {
    return {
      loading: false,
      listLoading: false,
      sysTitle: '',
      time: {
        timer: null,
        value: '2024-04-28 00:00:00'
      }
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    const $this = this
    $this.time.timer = setInterval(function() {
      // $this.$set($this.time, 'value', new Date().toLocaleString())
    }, 1000)
  },
  beforeDestroy() {
    // 清楚定时器
    clearInterval(this.time.timer)
  },
  methods: {
  }
}
</script>

<style lang="scss" >
@import "~@/components/ik/board/styles/board.scss";
.ik-container {
  position: relative;
  width: 100%;
  min-height: 1080px;
  background-image: url("~@/assets/robot/bgmap2.png");
  overflow: auto !important;
}
.el-header {
  position: absolute;
  z-index: 99;
  top: 0;
  height: 42px;
  width: 100%;
  background-image: url("~@/assets/ik/images/board/title.png");
  background-size: 100% 100%;
  color: white;
  font-weight: 800;
  line-height: 50px;
  text-align: center;
  .logo {
    position: absolute;
    left: 0;
    height: 42px;
    width: 155px;
    background-image: url("~@/assets/robot/logo.png");
    background-size: 100% 100%;
  }
  .time {
    position: absolute;
    top: 0;
    right: 15px;
    line-height: 50px;
    font-size: 13px;
    height: 50px;
    span {
      vertical-align: middle;
    }
  }
}

.el-main {
  position: relative;
  top: 42px;
  height: calc(100vh - 88px);
  padding: 0px;
  text-align: center;
}

.el-footer {
  height: 36px;
  background-color: #1482f0;
  color: #FFFFFF;
  /* 页脚 */
  .ik-footer-info {
    height: 36px;
    line-height: 36px;
    background-color: #1482f0;
    color: #FFFFFF;
  }
}
</style>
